<%@ page import="com.yoyo.itravel.constants.UserConstant" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title>门票预定</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">
    <link rel="stylesheet" type="text/css" href="css/total.css">
    <!-- 日历插件 -->
    <script type="text/javascript" src="js/calendar/laydate.js"></script>
    <link rel="stylesheet" type="text/css" href="css/login_dialog.css">

    <%
        String phone_email = "";
        String password = "";
        String login_info_str = "";
        String checkedRemember = "";
        String checkedAuto = "";
        Cookie[] cookies = request.getCookies();
        for (int i = 0; cookies != null && i < cookies.length; i++) {
            if ((UserConstant.REMEMBER_LOGIN_INFO).equals(cookies[i].getName())) {
                login_info_str = cookies[i].getValue();
                // 存在，获得用户登录信息
                phone_email = login_info_str.split("&")[0];
                password = login_info_str.split("&")[1];
                checkedRemember = login_info_str.split("&")[2];
            }
            if ((UserConstant.AUTO_LOGIN_INFO).equals(cookies[i].getName())) {
                login_info_str = cookies[i].getValue();
                // 存在，获得复选框的值
                checkedAuto = login_info_str.split("&")[2];
            }
        }
        request.setAttribute("checked_remember", checkedRemember);
        request.setAttribute("checked_auto", checkedAuto);
    %>

    <style>
        .title {
            font-size: 20px;
            font-weight: bolder;
            color: black;
        }

        .ticket_title {
            font-size: 20px;
            font-weight: bold;
            color: black;
        }

        .ticket_ul {
            clear: both;
            background: #e5fafd;
            display: none;
        }

        .ticket_ul li {
            color: #000;
            font-size: 18px;
            height: 35px;
            padding-left: 15px;
        }

        .hr {
            background-color: #fb8b2f;
            height: 1px;
            border: none;
        }

        .ticket_detail li {
            float: left;
            margin-right: 50px;
        }

        .orderBtn {
            background: #ff934a;
            color: white;
            border-radius: 10px;
            width: 90px;
            height: 40px;
        }

        .orderBtn:hover {
            background: #fb6e3a;
        }

        .nav {
            width: 100%;
            height: 40px;
            background: #627879;
        }

        .nav_text {
            color: white;
        }

        .nav a {
            text-decoration: none;
        }

        .nav a:hover {
            color: #ff7c40;
        }

        .bottom {
            background: white;
            bottom: 0px;
            width: 100%;
            height: 80px;
            position: fixed;
        }

        body {
            background: #e5e5e5;
        }

    </style>

</head>

<body>
<div class="nav">
    <div style="width: 1200px;height: 40px;margin: 0 auto;">
        <a href="javascript:;" onclick="javascript:history.back(-1);"><span style="color: white;font-weight: bolder;">&lt;&lt;&nbsp;&nbsp;返回</span></a>
        <div style="float: right;">
            <ul>
                <c:choose>
                    <c:when test="${empty user}">
                        <!-- 未登录状态 -->
                        <li><a href="javascript:;" onclick="login();" style="color: white;line-height: 40px;">登录</a></li>
                        <li><span class="nav_text">|</span></li>
                        <li><a href="../common/register.jsp" style="color: white;line-height: 40px;">注册</a></li>
                    </c:when>
                    <c:otherwise>
                        <!-- 登录状态 -->
                        <li><span class="nav_text">您好！${user.nickName}</span></li>
                        <li><span class="nav_text">|</span></li>
                        <li><a href="javascript:location.href='user/exit';"
                               style="color: white;line-height: 40px;">退出</a></li>
                    </c:otherwise>
                </c:choose>
            </ul>
        </div>
    </div>
</div>

<!-- 详情 start -->
<div class="wrap">
    <br/>
    <div class="prosum_box" style="padding: 17px;height: 350px;">
        <p style="font-weight: bolder;font-size: 25px;" id="rname"></p>
        <span style="font-size: 16px;color: black;" id="ticket_name"></span>
        <button style="background: #d1f8fa;width: 80px;border: 1px solid dodgerblue;color: dodgerblue;"
                id="cancel_rule"></button>
        <div style="display: none;background: #d6eed0;width: 1165px;margin: 0 auto;height: 100px;" id="rule_div">
            <p style="text-align: center;font-weight: bolder;margin: 0px auto;padding-top: 15px;font-size: 18px;">
                退改信息
            </p>
            <span id="rule" style="padding: 10px;"></span>
        </div>

        <table>
            <tr>
                <td>
                    <span style="font-size: 16px;font-weight: bold;line-height: 95px;">出行日期：</span>
                </td>
                <td>
                    <div class="inline laydate-icon" style="width:150px;" id="calendar"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-size: 16px;font-weight: bold;line-height: 80px;">购买数量：</span>
                </td>
                <td>
                    <button id="sub" class="btn" style="height: 30px;"><span
                            style="font-weight: bolder;font-size: 40px;line-height: 10px;">-</span></button>
                    <input id="order_num" class="btn" type="number" disabled
                           style="width: 60px;height: 30px;text-align: right;font-size: 16px;font-weight: bolder;color: #000;"
                           value="1"/>
                    <button id="add" class="btn" style="height: 30px;"><span
                            style="font-weight: bolder;font-size: 30px;line-height: 10px;">+</span></button>
                </td>
                <td>
                    <span style="color: #8e8e8e;margin-left: 15px;" id="max_order_num_left">最多可购</span>
                    <span style="color: #ff7f6e;" id="max_order_num">5</span>
                    <span style="color: #8e8e8e;" id="max_order_num_right">份</span>
                </td>
            </tr>
        </table>
        <div style="right: 160px;background: #eaeee8;height: 220px;width: 400px;margin-top: -267px;position: fixed;">
            <p style="padding-left: 160px;padding-top: 10px;font-size: 18px;font-weight: bolder;color: #141414;">结算信息</p>
            <hr style="color: #333333;"/>
            <p style="font-size: 16px;color: #2f2f2f;padding-left: 15px;" id="ticket_name2"></p>
            <div style="padding-left: 250px;">
                <span style="color: #ee8c54;font-size: 18px;">￥</span>
                <span id="price" style="color: #ee8c54;font-size: 25px;"></span>
                <span style="color: #8e8e8e;font-size: 14px;">X</span>
                <span style="color: #8e8e8e;font-size: 18px;" id="right_order_num">1</span>
            </div>
            <br/>
            <br/>
            <div style="background: #a7c2ce;height: 60px;text-align: center;">
                <span style="position: absolute;margin-left: -50px;color: #333333;font-size: 30px;margin-top: 8px;">总价</span>
                <span style="padding-left: 150px;color: #ee6e40;font-size: 40px;line-height: 60px;">￥</span>
                <span id="totalPrice" style="color: #ee6e40;font-size: 40px;line-height: 60px;"></span>
            </div>
        </div>
    </div>
    <div class="you_need_konw">
        <span class="title" style="font-size: 22px;padding-left: 15px;">取票人信息</span>
        <div class="notice">

            <table style="margin: 0 auto;">
                <tr>
                    <td width="90px;">
                        <span style="color: red;">*</span>
                        <span style="font-weight: bold;">真实姓名：</span>
                    </td>
                    <td height="70px">
                        <input id="real_name" name="real_name" type="text"
                               style="border: 1px solid black;height: 40px;width: 300px;font-size: 16px;padding-left: 5px;"
                               placeholder="请输入真实姓名" onchange="checkRealName('real_name')"
                               onblur="checkRealName('real_name')">
                    </td>
                    <td width="20px">
                        <img id="real_name_img" src="" style="padding-left: 5px;">
                    </td>
                    <td width="270px">
                        <span id="real_name_err" class="hint"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="color: red;">*</span>
                        <span style="font-weight: bold;">联系手机：</span>
                    </td>
                    <td height="70px">
                        <input id="phone" name="phone" type="text"
                               style="border: 1px solid black;height: 40px;width: 300px;font-size: 16px;padding-left: 5px;"
                               placeholder="请输入手机号" onchange="checkPhone()" onblur="checkPhone()">
                    </td>
                    <td width="20px">
                        <img id="phone_img" src="" style="padding-left: 5px;">
                    </td>
                    <td width="150px">
                        <span id="phone_err" class="hint"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="color: red;">*</span>
                        <span style="font-weight: bold;">身份证号：</span>
                    </td>
                    <td height="70px">
                        <input id="id_card" name="id_card" type="text"
                               style="border: 1px solid black;height: 40px;width: 300px;font-size: 16px;padding-left: 5px;"
                               placeholder="请输入身份证号" onchange="checkIDCard()" onblur="checkIDCard()">
                    </td>
                    <td width="20px">
                        <img id="id_card_img" src="" style="padding-left: 5px;">
                    </td>
                    <td width="150px">
                        <span id="id_card_err" class="hint"></span>
                    </td>
                </tr>
            </table>

        </div>
    </div>
</div>

<div class="bottom">
    <div style="width: 1200px;height: 40px;margin: 0 auto;">
        <input type="checkbox" id="check_agree" style="zoom: 180%;margin-top: 0px;"><span style="line-height: 80px;">我已阅读并同意&nbsp;<span
            style="color: #1cd62c;">预订须知、保险经纪委托合同及客户告知书、特别预订提示、安全提示</span></span>
        <div style="float: right;">
            <button id="payBtn" class="orderBtn" style="margin-top: 20px;">立即支付</button>
        </div>
    </div>
</div>

<!-- 登录弹窗 -->
<div class="modal fade" id="loginModal" style="display:none;">

    <div class="modal-dialog modal-sm" style="width:540px;">
        <div class="modal-content" style="border:none;">
            <div class="col-left"></div>
            <div class="col-right">
                <div class="modal-header">
                    <button type="button" id="login_close" class="close" data-dismiss="modal"><span
                            aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="loginModalLabel" style="font-size: 18px;margin-left: 18px;">登录</h4>
                </div>
                <div class="modal-body">
                    <section class="box-login v5-input-txt" id="box-login">
                        <form id="loginForm">
                            <ul>
                                <li class="form-group">
                                    <input class="form-control" id="phone_email"
                                           name="phone_email" placeholder="请输入邮箱/手机号" type="text"
                                           value='<%=phone_email%>'>
                                </li>
                                <li class="form-group">
                                    <input class="form-control" id="password" name="password"
                                           placeholder="请输入密码" type="password" value='<%=password%>'>
                                </li>
                                <li class="form-group">
                                    <input type="text" id="input_code" placeholder="请输入验证码"
                                           style="font-size: 12px;padding-left: 5px;height: 27px;letter-spacing: 2px;border: 1px solid lightgrey;border-radius: 5px;"/>
                                    <input style="position: absolute;top: 117px;margin-left: 10px;width: 85px;height: 30px;font-size: 21px;color: white;background: linear-gradient(to right, orangered, deepskyblue, cornflowerblue, orangered);
                        -webkit-background-clip: text;color: transparent;border: 1px solid lightgrey;border-radius: 5px;" type="button"
                                           id="code" onclick="createCode()" title='点击更换验证码'/>
                                </li>

                                <input type="checkbox" name="autoLogin" ${checked_auto}
                                       style="margin-top:1px;vertical-align:middle;"/>
                                <span style="margin-bottom:-1px;margin-left: 2px;font-size: 12px;vertical-align: middle;">两周内自动登录</span>
                                <input type="checkbox" name="rememberPwd" ${checked_remember}
                                       style="margin-top:1px;vertical-align:middle;margin-left: 20px;"/>
                                <span style="margin-bottom:-1px;margin-left: 2px;font-size: 12px;vertical-align: middle;">两周内记住密码</span>

                            </ul>
                            <br/>
                            <p class="good-tips marginB10"><a id="btnForgetpsw" target="_blank" class="fr"
                                                              href="../common/forget_pwd.jsp">忘记密码？</a>还没有账号？<a
                                    href="../common/register.jsp" target="_blank" id="btnRegister">立即注册</a></p>
                            <div class="login-box marginB10">
                                <button type="submit" class="btn btn-micv5 btn-block globalLogin">登录</button>
                            </div>
                        </form>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/login_dialog/modal.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/check_has_icon.js"></script>
<script type="text/javascript" src="js/dialog_login.js"></script>
<script src="js/getParameter.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/getDateStr.js"></script>
<script>
    var max_order_num = 1; // 最大预定数量
    var now_stock_num = 0; // 当前剩余库存数量
    var max_date = ""; // 最大预定日期
    var min_date = ""; // 最小预定日期
    var select_date = ""; // 选择的出行日期
    var price = ""; // 门票单价
    var detailTypeId = ""; // 门票具体类型id

    $(function () {

        // 1.获取门票具体类型id
        detailTypeId = getParameter("detailTypeId");

        // 2.发送ajax请求 sight/findSightBySightId
        $.post("ticket_detail_type/findTicketTypeDetailById", {detailTypeId: detailTypeId}, function (detailType) {
            if (typeof (detailType.flag) == "undefined") {
                min_date = getDateStr(new Date(detailType.startOrderDate));
                max_date = getDateStr(new Date(detailType.stopOrderDate));

                // 景点具体门票类型标题
                $("#rname").html("<" + detailType.detailTypeName + ">");
                $("#ticket_name").html(detailType.detailTypeName);
                // 获得门票最多可购买的数量
                max_order_num = parseInt(detailType.maxOrderNum);
                // 获得门票目前库存的数量
                now_stock_num = parseInt(detailType.nowStockNum);

                // 判断当前门票库存数是否小于最多可购买数
                if (now_stock_num < max_order_num) {
                    $("#max_order_num_left").html("");
                    $("#max_order_num_right").html("");
                    // 如果小于，则显示"仅剩xx份"
                    $("#max_order_num").html("仅剩" + now_stock_num + "份！");
                } else {
                    // 最多可购买多少份
                    $("#max_order_num").html(max_order_num);
                }



                // 右侧结算信息
                $("#ticket_name2").html("<" + detailType.detailTypeName + ">");
                price = detailType.orderPrice;
                $("#price").html(price);
                $("#totalPrice").html(price);

                var cancel_html = "";

                if (detailType.isCancel == 0) {
                    cancel_html = '不可退';
                } else if (detailType.cancelRule == "" || typeof (detailType) == "undefined") {
                    cancel_html = '随时可退';
                } else {
                    cancel_html = '条件退';
                }
                // 是否可退
                $("#cancel_rule").html(cancel_html);
                // 为cancel_rule按钮添加点击事件
                $("#cancel_rule").click(function () {
                    $("#rule_div").slideToggle("slow");
                });
                // 条件退的条件内容
                $("#rule").html(detailType.cancelRule);
            }
        });
    });

    <!-- 日历 -->
    !function () {
        laydate.skin('danlan'); //切换皮肤，请查看skins下面皮肤库
    }();
    // 延时800毫秒后执行日历显示触发函数，以确保min_date和min_date变量有值
    setTimeout("calendar()", "800");

    // 日历显示触发函数
    function calendar() {
        // 日期范围限定在昨天到明天
        laydate({
            elem: '#calendar',
            format: 'YYYY-MM-DD',
            min: min_date, // 预定开始日期
            max: max_date, // 预定截至日期
            ready: function(){
                alert("fff");
                var elem = $(".layui-laydate-content");//获取table对象
                layui.each(elem.find('tr'), function (trIndex, trElem) {//遍历tr

                    layui.each($(trElem).find('td'), function (tdIndex, tdElem) {
                        //遍历td
                        var tdTemp = $(tdElem);
                        if (tdTemp.hasClass('laydate-day-next') || tdTemp.hasClass('laydate-day-prev')) {
                            return;
                        }
                        alert(tdIndex);
                        if (tdIndex == min_date) {
                            //此处判断，是1的加上laydate-disabled，0代表星期日
                            tdTemp.addClass('laydate-disabled');
                            alert("fff");
                        }
                    });
                });
            },
            choose: function (date) { // 选择日期完毕的回调
                select_date = date;
            }
        });
    }

    // 预定数量
    /*加一按钮*/
    $("#add").click(function () {
        var oldValue = parseInt($('#order_num').val()); // 取出现在的值，并使用parseInt转为int类型数据

        oldValue++; // 自加1
        if (oldValue > 1) {
            // 将减一按钮设为可用
            $("#sub").removeAttr("disabled");
        }

        if (oldValue == (max_order_num > now_stock_num ? now_stock_num : max_order_num)) {
            $(this).attr("disabled", "disabled");
        }

        $('#order_num').val(oldValue); // 将增加后的值付给原控件
        // 右侧结算信息数量也一起变化
        $("#right_order_num").html(oldValue);

        // 右侧结算信息价格改变
        $("#totalPrice").html(price * $("#order_num").val());
    });

    /*减一按钮*/
    $("#sub").click(function () {
        var oldValue = parseInt($('#order_num').val()); //取 出现在的值，并使用parseInt转为int类型数据

        if (oldValue == 1) {
            // 将减一按钮设为不可用
            $(this).attr("disabled", "disabled");
        } else {
            oldValue--; // 自减1
            $('#order_num').val(oldValue); // 将增加后的值付给原控件
        }

        if (oldValue < (max_order_num > now_stock_num ? now_stock_num : max_order_num)) {
            // 将加一按钮设为可用
            $("#add").removeAttr("disabled");
        }

        // 右侧结算信息价格改变
        $("#totalPrice").html(price * $("#order_num").val());
        // 右侧结算信息数量也一起变化
        $("#right_order_num").html(oldValue);

    });

    // 为支付按钮添加点击事件
    $("#payBtn").click(function () {
        // 判断用户是否登录
        if (${empty user}) {
            // 提示用户登录，弹窗登录弹窗
            login();

            return false;
        }

        if (select_date == "") {
            layer.msg("请选择出行日期！",{icon:7, time: 1500}); // 弹出提示框

            return false;
        }
        if (checkRealName('real_name') && checkPhone() && checkIDCard() && checkAgree()) {
            // 获得真实姓名
            var real_name = $("#real_name").val();
            // 获得手机号
            var phone = $("#phone").val();
            // 获得身份证号
            var id_card = $("#id_card").val();
            // 获得购票数量
            var order_num = $("#order_num").val();

            // 发送异步请求
            $.get("alipay/pay", {trip_date: select_date, real_name: real_name, phone: phone, id_card: id_card, order_num: order_num, detailTypeId: detailTypeId}, function (result) {
                $("body").html(result);
            });

            return true;
        }

        return false;
    });


</script>

<!-- 登录弹窗 -->
<script>
    $(function () {
        $(".modal-header").mouseover(function () {
            $(this).css("cursor", "move");//改变鼠标指针的形状
        });

        $(".modal-header").mousedown(function (e) {
            var offset = $(this).offset();//DIV在页面的位置
            var x = e.pageX;//获得鼠标指针离DIV元素左边界的距离
            var y = e.pageY;//获得鼠标指针离DIV元素上边界的距离
            $(document).bind("mousemove", function (ev) { //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件

                $("#loginModal").stop();//加上这个之后

                var _x = ev.pageX - x + 38;//获得X轴方向移动的值
                var _y = ev.pageY - y - 15;//获得Y轴方向移动的值

                $("#loginModal").animate({left: _x + "px", top: _y + "px"}, 10);
            });

        });

        $(document).mouseup(function () {
            $("#loginModal").css("cursor", "default");
            $(this).unbind("mousemove");
        });

    });

    function login() {
        // 提示用户登录，弹窗登录弹窗
        $("#loginModal").modal("show");

        var e = [];
        $(".modal").on("show.bs.modal",function() {
            for (var s = 0; e.length > s; s++) e[s] && (e[s].modal("hide"), e[s] = null);
            e.push($(this));
            var o = $(this),
                a = o.find(".modal-dialog"),
                t = $('<div style="display:table; width:100%; height:100%;"></div>');
            t.html('<div style="vertical-align:middle; display:table-cell;"></div>'),
                t.children("div").html(a),
                o.html(t)
        });
    }


</script>

</body>

</html>